<!-- 实时数据 -->
<template>
  <div class="mod-demo-echarts">
    <el-alert type="success" :closable="false">
      <p class="el-alert__description">
        提示：请选择监测参数，可填写机器名称、服务器所属部门，以及将要查询的时间范围
      </p>
    </el-alert>

    <el-form
      :inline="true"
      :model="dataForm"
      @keyup.enter.native="getDataList()"
    >
      <el-form-item>
        <el-input
          v-model="dataForm.department"
          placeholder="部门"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="dataForm.machineName"
          placeholder="机器名"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="起始日期"
            v-model="dataForm.date1"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
        <el-col class="line" :span="1">—</el-col>
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="结束日期"
            v-model="dataForm.date2"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <div id="J_chartLineBox" class="chart-box"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
//import echarts from 'echarts'
export default {
  data() {
    return {
      dataForm: {
        department: "",
        machineName: "",
        monitorParam: "",
        date1: "",
        date2: "",
      },

      option: {
        title: {
          text: "实时数据显示",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["温度数据", "湿度数据", "烟雾传感", "水浸监测", "红外监测"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["05-06", "05-07", "05-08", "05-09", "05-10", "05-11", "05-12"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "温度数据",
            type: "line",
            stack: "总量",
            data: [33, 27, 66, 28, 26, 43, 28],
          },
          {
            name: "湿度数据",
            type: "line",
            stack: "总量",
            data: [55, 70, 56, 86, 58, 57, 56],
          },
          {
            name: "烟雾传感",
            type: "line",
            stack: "总量",
            data: [20, 20, 10, 20, 20, 10, 20],
          },
          {
            name: "水浸监测",
            type: "line",
            stack: "总量",
            data: [10, 10, 20, 10, 10, 10, 10],
          },
          {
            name: "红外监测",
            type: "line",
            stack: "总量",
            data: [10, 10, 10, 20, 10, 10, 10],
          },
        ],
      },

      chartLine: null,

      dataList: [],
    };
  },
  mounted() {
    this.initChartLine();
  },
  activated() {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.chartLine) {
      this.chartLine.resize();
    }
  },
  methods: {
    getDataList() {
      //console.log("submit!");
      this.option.xAxis.data = ["04-06", "04-07", "04-08", "04-09", "04-10", "04-11", "04-12"];
      this.option.series[0].data = [26, 27, Math.floor(Math.random()*100), 28, 26, 26, 28];
      this.option.series[1].data = [55, 56, Math.floor(Math.random()*56), 86, Math.floor(Math.random()*58), 57, 56];
      this.option.series[2].data = [10, 20, 10, 20, 20, 10, 10];
      this.option.series[3].data = [10, 20, 20, Math.floor(Math.random()*15), 20, 10, 10];
      this.option.series[4].data = [10, 10, 20, 20, 10, 10, 10];
      this.initChartLine();
    },
    // 折线图
    initChartLine() {
      // 第一步
      // var option = {
      //   title: {
      //     text: "实时数据显示",
      //   },
      //   tooltip: {
      //     trigger: "axis",
      //   },
      //   legend: {
      //     data: ["温度数据", "湿度数据", "烟雾传感", "水浸监测", "红外监测"],
      //   },
      //   grid: {
      //     left: "3%",
      //     right: "4%",
      //     bottom: "3%",
      //     containLabel: true,
      //   },
      //   toolbox: {
      //     feature: {
      //       saveAsImage: {},
      //     },
      //   },
      //   xAxis: {
      //     type: "category",
      //     boundaryGap: false,
      //     data: ["04-06", "04-07", "04-08", "04-09", "04-10", "04-11", "04-12"],
      //   },
      //   yAxis: {
      //     type: "value",
      //   },
      //   series: [
      //     {
      //       name: "温度数据",
      //       type: "line",
      //       stack: "总量",
      //       data: [26, 27, 66, 28, 26, 26, 28],
      //     },
      //     {
      //       name: "湿度数据",
      //       type: "line",
      //       stack: "总量",
      //       data: [55, 56, 56, 86, 58, 57, 56],
      //     },
      //     {
      //       name: "烟雾传感",
      //       type: "line",
      //       stack: "总量",
      //       data: [10, 20, 10, 20, 20, 10, 10],
      //     },
      //     {
      //       name: "水浸监测",
      //       type: "line",
      //       stack: "总量",
      //       data: [10, 20, 20, 10, 20, 10, 10],
      //     },
      //     {
      //       name: "红外监测",
      //       type: "line",
      //       stack: "总量",
      //       data: [10, 10, 20, 20, 10, 10, 10],
      //     },
      //   ],
      // };
      this.chartLine = echarts.init(document.getElementById("J_chartLineBox"));
      this.chartLine.setOption(this.option);



      // 重新绘制
      window.addEventListener("resize", () => {
        this.chartLine.resize();
      });
    },
  },
};
</script>

<style lang="scss">
.mod-demo-echarts {
  > .el-alert {
    margin-bottom: 10px;
  }
  > .el-row {
    margin-top: -10px;
    margin-bottom: -10px;
    .el-col {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }
  .chart-box {
    min-height: 400px;
  }
}
</style>
